5<template>
  <div class="albumdetails">
    <!-- 专辑信息 -->
    <div class="base-info">
      <!-- 专辑图片 -->
      <div class="left">
        <img class="image" :src="album.picUrl" />
      </div>
      <!-- 专辑详细信息 -->
      <div class="right">
        <h3>
          <span
            :style="{
              color: themeColor,
              border: `0.0625rem solid ${themeColor}`
            }"
            >专辑</span
          >
          {{ album.name }}
        </h3>
        <div class="right-item">
          <div class="item singer">
            歌手：<span
              style="color: #0c73c2"
              @click="toSingerDetails(singerinfo.id)"
              >{{ singerinfo.name }}</span
            >
            <span v-if="album !== ''">{{
              album.artists.length > 1 ? "/" : ""
            }}</span>
            <span
              v-if="album !== '' && album.artists.length > 1"
              style="color: #0c73c2"
              :title="album.artists[1].name"
              @click="toSingerDetails(album.artists[1].id)"
              >{{ album.artists[1].name }}</span
            >
          </div>
          <div class="item">
            发布时间：<span>{{ album.publishTime | dateTime }}</span>
          </div>
          <div class="item" v-if="album.company !== ''">
            发布公司：<span>{{ album.company }}</span>
          </div>
        </div>
        <div class="right-btn">
          <el-button
            plain
            icon="el-icon-video-play"
            :style="{ background: themeColor }"
            title="全部播放"
            @click="playmusic"
            >播放</el-button
          >
          <el-button plain icon="el-icon-folder-add">收藏</el-button>
          <el-button plain icon="iconfont icon-fenxiang"
            >分享({{ info.shareCount }})</el-button
          >
        </div>
      </div>
    </div>
    <!-- 专辑介绍 -->
    <div class="right-text">
      <div class="jianjie" :class="{ isopen: isOpen === false }">
        <h5>专辑介绍：</h5>
        <p
          class="album-desc"
          v-for="(item, index) in formatText(album.description)"
          :key="index"
        >
          {{ item }}
        </p>
      </div>
      <p class="open" v-if="textIndex > 6" @click="isOpen = !isOpen">
        <i
          :class="[
            { 'el-icon-arrow-down': isOpen === false },
            { 'el-icon-arrow-up': isOpen === true }
          ]"
        ></i
        >{{ isOpen == false ? "展开" : "收起" }}
      </p>
    </div>
    <!-- 音乐列表，评论列表 -->
    <div class="bottom-box">
      <el-tabs ref="tab" v-model="activeName">
        <!-- 音乐列表 -->
        <el-tab-pane label="歌曲列表" name="music">
          <ch-musiclist ref="musiclist" :playlist="playlist" />
        </el-tab-pane>
        <!-- 评论列表 -->
        <el-tab-pane name="comment">
          <span slot="label">评论({{ total }})</span>
          <ch-commentlist
            ref="playlist"
            :comments="comments"
            :hotcomments="hotcomments"
            :total="total"
            :page="page"
            :commentType="commentType"
            :t="t"
            :limit="limit"
            @currentChange="currentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="专辑详情" name="album">
          <p
            class="album-desc"
            v-for="(item, index) in formatText(album.description)"
            :key="index"
          >
            {{ item }}
          </p>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import MusicList from "./components/musiclist";
import CommentList from "./components/commentlist";
import { getAlbumdetails, getAlbumComment } from "@/api/singer.js";
import { getplaylisSongdetail } from "@/api/music.js";
import { songDetail } from "@/utils/detail.js";
export default {
  name: "albumdetails",
  components: {
    "ch-musiclist": MusicList,
    "ch-commentlist": CommentList
  },
  props: {},
  data() {
    return {
      activeName: "music",
      album: "",
      singerinfo: "",
      info: "",
      playlist: [],
      isOpen: false,
      comments: [], //最新评论
      hotcomments: [], // 热门评论
      total: 0, // 总数量
      t: 1, // 发布评论类型
      page: 1, // 页数
      limit: 40, // 每页数量
      commentType: 3, //评论类型
      textIndex: ""
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
  },
  watch: {
    $route() {
      this.playlist = [];
      this.getAlbumdetails();
    }
  },
  created() {
    // 获取单曲
    this.getAlbumdetails();
    // 获取评论
    this.getAlbumComment();
  },
  mounted() {},
  methods: {
    // 获取单曲
    async getAlbumdetails() {
      this.showLoading();
      const { data } = await getAlbumdetails({
        id: this.$route.query.id
      });
      if (data.code === 200) {
        this.closeLoading();
      }
      data.songs.forEach(async val => {
        const { data } = await getplaylisSongdetail({
          ids: val.id
        });
        let song = new songDetail(data.songs);
        this.playlist.push(song);
      });
      this.album = data.album;
      this.singerinfo = data.album.artist;
      this.info = data.album.info;
      this.title();
    }, // 获取评论
    async getAlbumComment() {
      const data = await getAlbumComment({
        id: this.$route.query.id,
        limit: this.limit,
        offset: (this.page - 1) * this.limit
      });
      this.comments = data.data.comments;
      this.hotcomments = data.data.hotComments;
      this.total = data.data.total;
    }, // 分页
    currentChange(page) {
      this.page = page;
      this.getAlbumComment();
    },
    playmusic() {
      this.$refs.musiclist.allmusic();
    },
    formatText(text) {
      if (text) {
        let newText = text.split("\n");
        this.textIndex = newText.length;
        return newText;
      }
    },
    title() {
      document.title = `${this.album.name} - 专辑  - 网抑云音乐`;
    }, // 跳转歌手详情
    toSingerDetails(id) {
      this.$router.push({
        path: "singerdetails",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.albumdetails {
  .base-info {
    position: relative;
    width: 100%;
    // height: 18.125rem;
    display: flex;
    font-size: 1rem;
    // justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
    padding: 0.9375rem 0;
    .left {
      width: 14.28571rem;
      height: 100%;
      // height: 18.125rem;
      // line-height: 18.125rem;;
      padding-right: 2.5rem;
    }
    .image {
      // display: block;
      width: 100% !important;
    }
    .right {
      height: 100%;
      width: 80%;
      h3 {
        padding: 0.625rem 0;
        color: #000;
        font-weight: 700;
        span {
          padding: 0.125rem 0.625rem;
          border: 0.0625rem solid red;
          color: red;
          border-radius: 0.3125rem;
          font-weight: normal;
        }
      }
      .right-item {
        padding: 0.625rem 0;
        .item {
          padding: 0.3125rem 0;
          color: #666;
        }
        .singer span:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
      .right-btn {
        display: flex;
        padding: 0.625rem 0;
        margin: auto 0;
      }
      /deep/.el-button {
        // display: flex;
        align-items: center;
        width: 12.1875rem;
        height: 3.125rem;
        .el-icon-video-play {
          font-size: 1.375rem;
          vertical-align: middle;
        }
        .el-icon-folder-add {
          font-size: 1.375rem;
          vertical-align: middle;
        }
        .icon-fenxiang {
          font-size: 1.375rem;
          vertical-align: middle;
        }
      }
      .el-button:nth-child(1) {
        background: red;
        color: #fff;
        // border: 0;
        // outline: none;
      }
    }
  }
  .right-text {
    width: 100%;
    .jianjie {
      //   display: -webkit-box;
      //   -webkit-box-orient: vertical;
      //   -webkit-line-clamp: 2;
      //   overflow: hidden;
      color: #666;
      h5 {
        font-size: 1rem;
      }
      .album-desc {
        text-indent: 2em;
        line-height: 1.875rem;
        margin-top: 0.5rem;
      }
    }
    .open {
      float: right;
      color: #0c73c2;
      font-size: 0.875rem;
      padding-right: 0.625rem;
      cursor: pointer;
    }
    .isopen {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
      overflow: hidden;
    }
  }
  .bottom-box {
    margin-top: 1.25rem;
    margin-bottom: 7.5rem;
  }
  .album-desc {
    text-indent: 2em;
    line-height: 1.875rem;
    margin-top: 0.5rem;
  }
}
</style>
